<template>
  <panel>
    <div class="container">
      <x-row>
        <x-col :span="9">
          <div class="msg-box" :style="'height:' + chartHeight + 'px'">
            <div class="msg-content" v-for="data in chartData">
              <div class="number-box">
                <span class="number" v-animated-number="data.value"></span>
                <span class="unit">{{data.unit}}</span>
              </div>
              <div class="title">
                <span>{{data.title}}</span>
                <span class="change-type" :class="data.changeType" v-if="data.change">
                  <i class="icon"></i>
                  {{data.change}}
                </span>
              </div>
            </div>
          </div>

        </x-col>
        <x-col :span="15">
          <pie :width="chartWidth" :height="chartHeight + 'px'" :options="chartOptions"></pie>
        </x-col>
      </x-row>
    </div>
  </panel>
</template>

<script>
export default {
  name: 'Statistic',

  data () {
    return {
      chartWidth: '50px',
      chartHeight: 0,
      chartOptions: null,
      chartData: [
        {
          title: '监控排水设备',
          value: 16,
          unit: '',
          change: '',
          changeType: 'dec'
        },
        {
          title: '监控区域',
          value: 5,
          unit: '',
          change: '',
          changeType: 'add'
        },
        {
          title: '今日异常',
          value: 4,
          change: '10.3%',
          changeType: 'add'
        }
      ]
    }
  },

  mounted () {
    setTimeout(() => {
      this.chartWidth = `${this.$el.clientWidth / 3 * 2 - 30}px`
      this.chartHeight = this.$el.clientHeight
      this.chartOptions = {
        title: {
          text: '当前故障数',
          x: 'center',
          bottom: 10,
          textStyle: {
            color: '#999',
            fontSize: 12,
            fontWeight: 'normal'
          }
        },
        series: [{
          radius: ['40%', '60%'],
          center: ['50%', '45%'],
          data: [
            {value: 33, name: '13,14栋消防'},
            {value: 111, name: '3栋变电房'}
          ]
        }]
      }
    }, 0)
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../assets/stylus/common'

.container {
}

.msg-box {
  padding: 6%;
  box-sizing: border-box;

  .msg-content {
    width: 100%;
    height: 33.3%;
    overflow: hidden;
    padding-left: 3%;
    padding-top: 3%;
    box-sizing: border-box;
    border-bottom: 1px dashed rgba(255,255,255,0.3);
    color: #99A1A8;

    &:last-child {
      border-bottom: 0;
    }

    .number-box {

      .number {
        font-size: 20px;
        color: #fff;
      }
    }

    .title {
      position: relative;
      font-size: 12px;

      .change-type {
        position: absolute;
        right: 0;
        font-size: 12px;
        color: green;

        .icon {
          display: inline-block;
          width: 13px;
          height: 13px;
          transform: rotate(90deg) translate(1px, -4px);
          background: url('../../../../assets/images/dec.png') no-repeat right bottom;
        }

        &.add {
          color: red;

          .icon{
            transform: rotate(-90deg) translate(-1px, 4px);
            background-image: url('../../../../assets/images/add.png');
          }
        }
      }
    }
  }
}
</style>
